<template>
  <div class="poetryContent">
    <el-card>
      <el-page-header @back="router.back()">
        <template #content>
          <span class="text-large font-600 mr-3" style="color: #fff;"> {{ route.query.title }} </span>
        </template>
      </el-page-header>
    </el-card>
    <div class="poetryMain">
      <el-card style="background: black;">
        <div class="content">
          <img src="@/assets/imgs/iphone.png" style="opacity: 0.8;" alt="">
          <div class="left">
            <p v-for="(item, index) in poetryValue" :key="index" v-if="poetryValue.length" style="margin-bottom: 5px;">
              {{ item }}
            </p>
            <p v-else>
              请配置
            </p>
          </div>
          <div class="right">
            <el-form :model="form" ref="formRef" :rules="rules" label-width="120px">
              <el-form-item style="margin-top: 20px;" label="藏头诗内容：" prop="title">
                <el-input
                  v-model="form.title"
                  placeholder="请输入藏头诗内容"
                  maxlength="8"
                  show-word-limit
                  style="width: 300px;height: 40px;"
                >
                </el-input>
              </el-form-item>
              <el-form-item style="margin-top: 20px;" label="藏头诗类型：" prop="location">
                <el-select v-model="form.location" placeholder="请选择生成类型" @change="changeL" :no-data-text="'无数据'" style="width: 300px;height: 40px;">
                  <el-option
                    v-for="(item, index) in locationList"
                    :key="index"
                    :label="(item.name as string)"
                    :value="(item.value as string)"
                    style="padding-left: 10px;padding-top: 8px;"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item style="margin-top: 20px;" label="藏头诗形式：" prop="type">
                <el-select v-model="form.type" placeholder="请选择藏头诗形式" @change="changeX" :no-data-text="'无数据'" style="width: 300px;height: 40px;">
                  <el-option
                    v-for="(item, index) in typeList"
                    :key="index"
                    :label="(item.name as string)"
                    :value="(item.value as string)"
                    style="padding-left: 10px;padding-top: 8px;"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item style="margin-top: 20px;">
                <el-button style="width: 120px;height: 40px;" type="warning" @click="poetryCreate">立即生成</el-button>
                <el-button style="width: 120px;height: 40px;" type="danger" @click="reset">重置页面</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import type { FormRules, FormInstance } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'
import request from '@/utils/request'

const route = useRoute()
const router = useRouter()

const formRef = ref<FormInstance>()
const form = ref<any>({
  title: '',
  location: '',
  type: ''
})

const poetryValue = ref<any>([])
const poetryValueAll = ref<any>([])

const locationList = ref<any>([
  {name: '藏头', value: '1'},
  {name: '藏尾', value: '2'},
  {name: '藏中', value: '3'},
  {name: '递增', value: '4'},
  {name: '递减', value: '5'},
])

const typeList = ref<any>([
  {name: '五言', value: '5'},
  {name: '七言', value: '7'},
])

const changeL = (value: string) => {
  form.value.location = value 
}

const changeX = (value: string) => {
  form.value.type = value
}

const rules = ref<FormRules>({
  title: [{ required: true, message: '请输入藏头诗内容', trigger: ['change', 'blur'] }],
  location: [{ required: true, message: '请选择生成类型', trigger: ['change', 'blur'] }],
  type: [{ required: true, message: '请选择藏头诗形式', trigger: ['change', 'blur'] }],
})

const reqPoetryInfo = (data: any) => request.post<any, any>(`https://route.showapi.com/950-1?showapi_appid=1505398&showapi_sign=38a5f6fb1abe4355bc2f0d5435372138&data=0424&num=${form.value.type}&type=${form.value.location}&key=${form.value.title}&yayuntype='1'`, data)
const poetryCreate = () => {
  formRef.value?.validate((flag) => {
    if (flag) {
      reqPoetryInfo({
        // showapi_appid: '1505398', //这里需要改成自己的appid
        // showapi_sign: '38a5f6fb1abe4355bc2f0d5435372138',  //这里需要改成自己的应用的密钥secret
        num: form.value.type,
        type: form.value.location,
        yayuntype: '1',
        key: form.value.title
      }).then(res => {
        console.log('res', res)
        if (res.showapi_res_body.ret_code == 0) {
          poetryValueAll.value = res.showapi_res_body.list
          const _arr = poetryValueAll.value[0].split('。')
          poetryValue.value = _arr
        } else {
          ElMessage({
            type: 'error',
            message: res.showapi_res_body.remark
          })
        }
      })
    }
  })
}

onMounted(() => {

})

const reset = () => {
  form.value.title = ''
  form.value.location = ''
  form.value.type = ''
  poetryValue.value = []
}

</script>

<style lang="scss" scoped>
.poetryContent {
  width: 100%;

  .el-card {
    border-radius: $base-card-border-radius;
  }

  .poetryMain {
    margin-top: 20px;
    padding: 20px;

    .el-card {
      border-radius: 16px;
      box-shadow: 0px 4px 18px 0px rgba(248,216,82, 0.9);

      .content {
        width: 100%;
        height: 380px;
        display: flex;
        justify-content: space-between;
        position: relative;
        overflow-x: auto;
        img {
          width: 100%;
          height: 100%;
        }
        .left {
          width: 190px;
          height: 260px;
          position: absolute;
          left: 200px;
          top: 130px;
          color: #999999;
          font-weight: 500;
          font-size: 18px;
        }
        .right {
          width: 100%;
          display: flex;
          flex-direction: column;
          height: 100%;

          :deep(.el-input__wrapper) {
            width: 300px;
            height: 40px;
          }
        }
      }
    }
  }

}
</style>